<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css3</title>
    </head>
    
    <style>
        
        /* 浏览器前缀 */
        .box1 {
            width: 100%;
            margin-top: 20px;
            text-align: center;
            font-size: 100px;
            -webkit-text-stroke: 1px red;
            color: transparent;
        }
        
        /* 圆角 */
        .box2 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 10px 20px 10px 20px;
        }
        
        /* 阴影：字体和盒子 */
        .box3 {
            width: 100%;
            margin: auto;
            margin-top: 10px;
            text-align: center;
            font-size: 100px;
            text-shadow: 5px 5px 3px red;
            border: 1px solid red;
            box-shadow: 0px 0px 3px 1px red;
            width: 600px;
            border-radius: 10px;
        }
        
        /* 渐变 */
        .box4 {
            width: 200px;
            height: 200px;
            margin: auto;
            margin-top: 10px;
            border: 1px solid black;
            background-image: linear-gradient(180deg,red,green);
        }
        
        /* 径向渐变 */
        .box5 {
            width: 200px;
            height: 200px;
            margin: auto;
            margin-top: 10px;
            border: 1px solid black;
            background-image: radial-gradient(circle at 0 0 ,green,blue);
        }
    </style>
    
    <body>
        
        <div class="box1">
            <span>前端学习</span>
        </div>
        
        <div class="box2">
            
        </div>
        
        <div class="box3">
            前端学习
        </div>
        
        <div class="box4"></div>
        <div class="box5"></div>
        
    </body>
</html>